<!--
 * @Author: your name
 * @Date: 2021-12-01 15:56:45
 * @LastEditTime: 2021-12-12 01:42:04
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-antd-admin-y\src\components\uploadImages\oneImage.vue
-->
<template>
  <div id="app">
    <!-- 有旧图片 -->
    <template v-if="!imagesArray">
      <div
        v-for="(item, index) in numberArray"
        :key="index"
        style="margin-left: 10px;margin-top:10px"
      >
        <oneImage
          style="width: 130px"
          ref="manyOneImage"
          :idKey="'_'+only+'_'+index"

          :keyIndex="index"
          v-if="item == 1"
          @add="add"
          @del="del"
        />
      </div>
    </template>
    <!-- 没有旧图片 -->
    <template v-else>
      <div
        v-for="(item, index) in numberArray"
        :key="index"
                style="margin-left: 10px;margin-top:10px"

      >
        <oneImage
          style="width: 130px"
          ref="manyOneImage"
          
          :idKey="'_'+only+'_'+index"
          :keyIndex="index"
          v-if="item == 1"
          @add="add"
          @del="del"
          :imageUrl="
            index + 1 == numberArray.length
              ? undefined
              : imageUrl(imagesArray[index])
          "
        />
      </div>
    </template>
  </div>
</template>
<script>
import oneImage from "./oneImage.vue";
import moment from "moment"; //导入文件
export default {
  name: "app",
  components: {
    oneImage,
  },
  props: {
    path: String,
    only:String,
    imagesArray: Array,
  },
  data() {
    return {
      numberArray: [1], //数量
    };
  },
  created() {
    // console.log(this.only)
    // if(this.imageUrl){
    // this.readerResult = this.imageUrl
    // }
    if (this.imagesArray) {
      this.numberArray = [];
      for (let i = 0; i < this.imagesArray.length; i++) {
        this.numberArray.push(1);
      }
      this.numberArray.push(1);
    }
  }, //生命周期 - 创建完成（可以访问当前this实例）
  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  watch: {},
  methods: {
    add() {
      this.numberArray.push(1);
    },
    del(keyIndex) {
      this.$set(this.numberArray, keyIndex, 0);
    },
    time() {
      return moment().format("X");
    },
    getFile() {
      let formDataImg = new FormData();

      let check = false;
      for (let i = 0; i < this.$refs.manyOneImage.length; i++) {
        let oneImage = this.$refs.manyOneImage[i].getFile();
        if (oneImage.has("file")) {
          if (oneImage.get("file")) {
            formDataImg.append("files_" + i, oneImage.get("file"));
            if (!formDataImg.has("fileType")) {
              formDataImg.append("fileType", "images");
            }
            if (this.path && !formDataImg.has("path")) {
              formDataImg.append("path", this.path);
            }
            check = true;
          }
        }
      }

      if (this.imagesArray ) {
        let oldImageStr = "";
        for (let i = 0; i < this.imagesArray.length; i++) {
          if (this.numberArray[i] == 1) {
            oldImageStr += this.imagesArray[i] + ",";
          }
        }
        if (oldImageStr) {
           oldImageStr = oldImageStr.substr(0, oldImageStr.length-1);
        }
        return {
          formDataImg: check ? formDataImg : false,
          oldImageStr: oldImageStr,
        };
      } else {
        return check ? formDataImg : false;
      }

      // console.log(this.$refs)
    },
  },
};
</script>
<style lang="less" scoped>
#app {
  display: flex;
  flex-wrap: wrap;
}
</style>
